---
title: 从 Jekyll 迁移
description: 将现有的 Jekyll 项目迁移到 Astro 的提示
type: migration
stub: true
framework: Jekyll
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Jekyll](https://jekyllrb.com) 是一个基于 Ruby 的静态站点生成器。

## Jekyll 和 Astro 的主要相似之处

Jekyll 和 Astro 有一些相似之处，可以帮助你迁移项目：

- Jekyll 和 Astro 都是静态站点生成器，通常用于创建博客。

- Jekyll 和 Astro 都允许你[使用 Markdown 和 HTML 书写内容](/zh-cn/guides/content/)。Jekyll 和 Astro 都为页面布局和未发布的草稿文章提供了一些特殊的 frontmatter YAML 属性。你可以继续在 Astro 中使用现有的 Markdown 文件。

- Jekyll 和 Astro 都使用[基于文件的路由](/zh-cn/guides/routing/)从博客文章创建页面。Astro 为[所有页面和文章提供了一个特殊的 `src/pages/` 目录](/zh-cn/basics/project-structure/#srcpages)。Jekyll 使用一个类似的特殊文件夹 `posts/` 来存放你的 Markdown 博客文章，但是你的网站页面可以存在其他地方。创建新的博客文章应该很熟悉。

## Jekyll 和 Astro 的主要区别

当你在 Astro 中重建 Jekyll 网站时，你会注意到一些重要的差异：

- 由于 Jekyll 主要是一个博客平台，因此一些内置的博客功能你可能需要在 Astro 中自己构建。或者选择一个包含这些功能的[博客入门模板主题](https://astro.build/themes?search=&categories%5B%5D=blog)。例如 Jekyll 内置了对标签和类别的支持，你可以在一些 Astro 博客主题中找到这些，但这并不包括在最简单的 Astro 项目中。

- Jekyll 使用 Liquid 模板来实现可重用的布局元素和模板。Astro 使用类似 JSX 的 [`.astro` 文件作为模板和组件](/zh-cn/basics/astro-components/)。任何 `.astro` 文件都可以是组件、布局或整个页面，并且可以导入和渲染任何其他 Astro 组件。你也可以使用[其他 UI 框架组件（如 React、Svelte、Vue、Solid）](/zh-cn/guides/framework-components/)以及[项目中其他文件](/zh-cn/guides/imports/)，例如 Markdown 或 MDX 的内容或元素进行构建。

## 从 Jekyll 切换到 Astro

要将 Jekyll 博客转换为 Astro，请从我们的博客主题启动器模板开始，或者在[主题展示](https://astro.build/themes/)中探索更多社区博客主题。

你可以向 `create astro` 命令传递 `--template` 参数，以使用我们的官方启动器之一启动新的 Astro 项目。或者你可以[从 GitHub 上任何现有的 Astro 项目启动一个新项目](/zh-cn/install/auto/#入门模板)。

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

使用 [Astro Markdown 布局](/zh-cn/basics/layouts/#markdownmdx-布局)代替 Liquid 模板，将现有的 Markdown 文件作为内容来[创建 Markdown 页面](/zh-cn/basics/layouts/#markdownmdx-布局)。

许多现有的 HTML 页面内容都可以转换为 [Astro 页面](/zh-cn/basics/astro-pages/)，此外你还可以直接在 [HTML 模板中使用变量、类似 JSX 的表达式和组件导入](/zh-cn/basics/astro-syntax/#类-jsx-表达式)。

Astro 没有接收占位符的 `permalink` 属性。如果希望保留现有的 URL 结构，可能需要阅读更多关于 [Astro 页面路由](/zh-cn/guides/routing/)的信息。或者考虑在 Netlify 这样的[主机上设置重定向](https://docs.netlify.com/routing/redirects/)。

要转换其他类型的网站，如作品集或文档网站，请参阅 [astro.new](https://astro.new) 上的更多官方入门模板。你会找到每个项目的 GitHub 仓库的链接，以及在 StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中一键打开一个工作项的链接。

要转换其他类型的网站，如作品集或文档网站，请参阅 [astro.new](https://astro.new) 上的更多官方入门模板。你能找到每个项目的 GitHub 仓库链接，以及一键打开 StackBlitz、CodeSandbox 和 Gitpod 在线开发环境的链接。

## 社区资源

- 博客文章：[回到未来：我们的技术博客从 Jekyll 过渡到 Astro](https://alasco.tech/2023/09/06/migrating-to-astro/)。